import React, { Component } from 'react';
class ListBox extends Component {
	constructor(props) {
		super(props);
	}

	render() {
		const { list, deleteItem } = this.props;
		return (
			<div>
				<h3 data-test="count">{list.length}</h3>
				<ul>
					{list.map((item, index) => (
						<li
							data-test="list-item"
							key={`${item}-${index}`}
						>
							{item}
							<span data-test="delete-item" onClick={()=>deleteItem(index)}>x</span>
						</li>
					))}
				</ul>
			</div>
		);
	}
}

export default ListBox;
